import { createRouter, createWebHistory } from 'vue-router'

// 引入 nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// import Home from './views/Home.vue'
// import Films from './views/Films.vue'
// import Film from './views/Film.vue'
// import Cinemas from './views/Cinemas.vue'
// import Center from './views/Center.vue'
// import Order from './views/Order.vue'
// import Money from './views/Money.vue'
// import Login from './views/Login.vue'

// const Home = () => import('./views/Home.vue')
// const Films = () => import('./views/Films.vue')
// const Film = () => import('./views/Film.vue')
// const Cinemas = () => import('./views/Cinemas.vue')
// const Center = () => import('./views/Center.vue')
// const Order = () => import('./views/Order.vue')
// const Money = () => import('./views/Money.vue')
// const Login = () => import('./views/Login.vue')

NProgress.configure({ showSpinner: false });

// NProgress.start()
// setTimeout(() => {
//   NProgress.done()  
// }, 2000);
console.log('===', import.meta.env.BASE_URL)

const router = createRouter({
  // @4 中 base 是被移除了的
  // base: '',
  // history: createWebHistory('/lw'),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // 顶层路由如何寻找：引起一整个屏幕发生变化的就是顶级路由
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue'),
      redirect: '/films',
      children: [
        {
          path: 'films',
          name: 'films',
          component: () => import('./views/Films.vue')
        },
        {
          path: 'cinemas',
          name: 'cinemas',
          component: () => import('./views/Cinemas.vue')
        },
        {
          path: 'center',
          name: 'center',
          component: () => import('./views/Center.vue')
        }
      ]
    },
    {
      path: '/film/:filmId',
      name: 'film',
      component: () => import('./views/Film.vue'),
      // 单个路由独享的守卫
      /**
       * 可选的第三个参数 next
       *    概念：
       *        放行，
       *        VueRouter@4的时候是可选
       *        VueRouter@3的时候是必须要使用的
       *
       *    1. VueRouter@4 版本中，声明了 next 的话，就必须去调用它，如果不调用则表示取消了导航
       *
       *    有 next 的情况【适用于 @3 与 @4】：
       *        1. 不调用 next           取消导航
       *        2. next(false)          取消导航
       *        3. next(true)           放行
       *        4. next()               放行
       *        5. next(路由)            重定向到别的路由去
       *            next('/login')
       *            next({
       *              path: '/login'
       *            })
       *
       *    没有 next 的情况【适用于 @4】,主要通过函数的返回值来控制导航:
       *        1. 返回一个 undefined or true     放行
       *        2. 返回一个 false                 取消导航
       *        3. 返回一个 路由                   重定向到该路由
       *           return '/login'
       *           return { path: '/login' }
       *
       */
      beforeEnter() {
        console.log('beforeEnter')
        return true
      }
      // beforeEnter(to, from, next) {
      //   console.log('film beforeEnter')
      //   console.log('to', to)
      //   console.log('from', from)

      //   next('/center')
      // }
    },
    {
      path: '/order',
      name: 'order',
      component: () => import('./views/Order.vue'),
      meta: {
        needLogin: true
      }
      // beforeEnter() {
      //   // 判断当前是否登录
      //   const token = localStorage.getItem('token')
      //   if (!token) {
      //     // 没有登录
      //     return '/login'
      //   }
      // }
    },
    {
      path: '/money',
      name: 'money',
      component: () => import('./views/Money.vue'),
      meta: {
        needLogin: true
      }
      // beforeEnter() {
      //   // 判断当前是否登录
      //   const token = localStorage.getItem('token')
      //   if (!token) {
      //     // 没有登录
      //     return '/login'
      //   }
      // }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./views/Login.vue')
    },
    {
      // 移除了 * 号玩法，换成如下的 正则表达式来玩
      path: '/:pathMatch(.*)*',
      component: () => import('./views/Page404.vue')
    }
  ]
})

/**
 * 全局的，是通过 router 来调用的
 */

// 需要登录的路由
// const needLoginNames = ['order', 'money']

// 全局前置
router.beforeEach((to, from) => {
  NProgress.start()

  console.log('beforeEach to', to)

  if (to.meta.needLogin) {
    // 判断当前是否登录
    const token = localStorage.getItem('token')
    if (!token) {
      // 没有登录
      return `/login?redirect=${to.path}`
    }
  }
})

// // 全局后置
router.afterEach((to, from) => {
  NProgress.done()
  console.log('afterEach')
})

// // 全局解析
// router.beforeResolve((to, from) => {
//   console.log('beforeResolve')
// })

export default router
